<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>商家注册</h3>
            </template>
            <el-form ref="refForm" label-width="100px" :model="businessData" :rules="rules">
                <el-form-item label="商家账号" prop="account">
                    <el-input v-model="businessData.account" placeholder="商家账号" />
                </el-form-item>
                <el-form-item label="商家密码"  prop="password">
                    <el-input v-model="businessData.password" placeholder="商家密码"/>
                </el-form-item>
                <el-form-item label="商家电话"  prop="telephone">
                    <el-input v-model="businessData.telephone" placeholder="商家电话"/>
                </el-form-item>
                <el-form-item label="商家联系人"  prop="contact">
                    <el-input v-model="businessData.contact" placeholder="商家联系人"/>
                </el-form-item>
                <el-form-item>
                    <el-space  :size="30"> 
                        <el-button type="primary" @click="regist">
                        注册
                    </el-button>
                    <el-button type="primary" @click="reset">
                        重置
                    </el-button>
                    <el-link @click="$router.push('businessLogin')">已有账号，去登录 </el-link>  
                    </el-space>
                  
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
//import axios from "axios";
import {businessRegisterAPI} from"@/api/business.js";

//import qs from "qs";
export default {
    data() {
        return {
            // 商家注册时的对象
            businessData: {},
            // 校验规则
            rules: {
                account: { required: true, message: "账号不能为空", trigger: "blur" },
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 12, message: "长度必须6~12位", trigger: "blur" },
                ],
                telephone: {
                    required: true,
                    message: "手机号不能为空",
                    trigger: "blur",
                },
                contact: {
                    required: true,
                    message: "联系人姓名不能为空",
                    trigger: "blur",
                },

            },
        }
        
    },
    methods:{
        //点击注册按钮
        regist(){
            
            //提交数据之前要对表单进行校验
            this.$refs.refForm.validate((valid) => {
                if(valid){
                    // 提交表单数据
                    businessRegisterAPI(this.businessData).then(resp=>{
                        //注册成功，弹窗，跳到登录页面
                        if(resp.data==1){
                            ElNotification({
                                title: "成功",
                                message: "注册成功",
                                type: "success",
                            });
                            // 跳转到登录
                            this.$router.push("/businessLogin");
                        }
                    })
                }
            })
        },
        //点击重置按钮
        reset(){
            this.$refs.refForm.resetFields();
        }
    }

}
</script>

<style scoped>
/* .box {
    width: 500px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
} */
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://p1.meituan.net/travelcube/a5dfd35414dafdab196e459cea685f00231306.jpg);
}

.el-card {
    width: 500px;
    opacity: 0.85;
}
</style>